<template>
    <view>
        <view :style="'height: '+(height?height:'100')+'rpx;'"></view>
        <view class="cu-bar tabbar shadow foot" 
            :style="'height: calc('+(height?height:'100')+'upx + env(safe-area-inset-bottom) / 2);'
                +(style_bg?('background-color: '+style_bg+';'):'')
                +(zindex?('z-index:'+zindex+';'):'')
                +(style_foot?(style_foot+';'):'')"
            :class="[title?'flex justify-center bg-nddyny text-lg':'', class_bg?class_bg:'bg-white', class_foot?class_foot:'']"
             @tap="_tap()">
            <template v-if="title">{{title}}</template>
            <view v-if="content" v-for="(info, key) in content" :key="key" class="cu-btn" :class="info.class" @tap="_tap(info.tap, info.uri)"
                :style="'height: '+(height?height:'100')+'rpx;'">{{info.title}}</view>
            <slot name="content"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['tap', 'uri', 'title', 'content', 'height', 'class_bg', 'style_bg', 'zindex', 'class_foot', 'style_foot'],
        data() {
            return {}
        },
        methods: {
            _tap(_tap, _uri) {
                let tap = _tap || this.tap;
                let uri = _uri || this.uri;
                if (tap) {
                    tap();
                }
                if (uri) {
                    this.$store.commit('userNavTo', uri);
                }
            }
        }
    }
</script>
